<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="keywords" content="office,onlyoffice,文档编辑器">
    <meta name="description" content="在线文档编辑器">
    <title>Aulang文档</title>
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/css/all.min.css"/>
</head>
<body>
<div class="container" id="index">
    <div class="mt-5" @click="fileMenu = false">
        <div class="d-flex justify-content-between mb-3">
            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle" @click.stop="fileMenu = !fileMenu">文件</button>
                <div class="dropdown-menu" :class="{'d-block':fileMenu}">
                    <label class="dropdown-item">
                        <span>打开</span>
                        <input type="file" accept=".docx,.xlsx,.pptx" class="d-none" @change="open"/>
                    </label>
                    <div class="dropdown-divider"></div>
                    <button class="dropdown-item" type="button" @click="newDoc">新建</button>
                </div>
            </div>

            <form>
                <div class="form-row">
                    <div class="col-4">
                        <select class="form-control" v-model="fileType">
                            <option value="">全部</option>
                            <option value="docx">docx</option>
                            <option value="xlsx">xlsx</option>
                            <option value="pptx">pptx</option>
                        </select>
                    </div>
                    <div class="col-8">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="文件名" v-model="filename">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button" @click="query">
                                    <i class="fa fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <table class="table table-hover">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">文件名</th>
                <th scope="col">创建者</th>
                <th scope="col">创建时间</th>
                <th scope="col">修改时间</th>
                <th scope="col">状态</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(doc,index) in content">
                <td v-text="index + 1"></td>
                <td v-text="doc.name"></td>
                <td v-text="doc.ownerName"></td>
                <td v-text="doc.createTime"></td>
                <td v-text="doc.modifiedTime"></td>
                <td>
                    <span v-show="doc.status==='editing'">正在编辑</span>
                    <span v-show="doc.status==='saved'">保存成功</span>
                    <span v-show="doc.status==='error'">保存出错</span>
                </td>
                <td>
                    <a href="javascript:;" @click="edit(doc.id)">编辑</a>
                    <a href="javascript:;" @click="download(doc.id)">下载</a>
                    <a href="javascript:;" @click="del(doc.id,doc.name)">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
        <nav>
            <ul class="pagination justify-content-center">
                <li class="page-item" :class="{disabled: noPrevious}">
                    <a class="page-link" href="#" @click="goPage(page-1)">上一页</a>
                </li>

                <li class="page-item" v-for="index in totalPages">
                    <a class="page-link" href="#" @click="goPage(index - 1)" v-text="index"></a>
                </li>

                <li class="page-item" :class="{disabled: noNext}">
                    <a class="page-link" href="#" @click="goPage(page+1)">下一页</a>
                </li>
            </ul>
        </nav>
    </div>
</div>
<script src="http://cdn.jsdelivr.net/npm/axios@0.20.0/dist/axios.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script src="./js/axios-init.js"></script>
<script src="./js/index.js"></script>
</body>
</html>